import React, { useContext, useEffect, useState } from "react";
import { Button, Form, Input, Tag, Space } from "antd";
import type { TableColumnsType, FormProps } from 'antd';
import dayjs from 'dayjs';
import AccountContextProvider, { AccountContext } from "./store";
import { getAccountList } from './../../api/account';
import TableComponent from '../../components/TableComponent';
import PaginationComponent from '../../components/PaginationComponent';
import AddOrEdit from './addOrEdit';
import styles from "./index.module.scss";
import type { accountReqPramesType, accountPaginationType, accountResDataType } from "./../../types/accountType"

const Account = () => {
    const { state, dispatch } = useContext(AccountContext);
    const [form] = Form.useForm();

    // 表格
    const columns: TableColumnsType<accountResDataType> = [
        {
            title: '名称',
            dataIndex: 'account',
            key: "account",
        },
        {
            title: '岗位描述',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '账号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            render: (_, { state }) => {
                if (state === 1) {
                    return <Tag color='volcano' key={state}>
                        正常
                    </Tag>
                } else {
                    return <Tag color='gold' key={state}>
                        停用
                    </Tag>
                }
            }
        },
        {
            title: '添加时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (_, { createTime }) => {
                return dayjs.unix(createTime).format("YYYY-MM-DD hh:mm:ss")
            }
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            render: (_, { updateTime }) => {
                return dayjs.unix(updateTime).format("YYYY-MM-DD hh:mm:ss")
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, { userId, account }) => (
                <Space size="middle">
                    <Button type="link" onClick={() => {
                        dispatch({ type: "SET_ID", payLoad: { userId, account } });
                        dispatch({ type: "CHANGE_ADDOREDIT", payLoad: true });
                        dispatch({ type: "SET_TYPE", payLoad: 'edit' });
                    }}>编辑</Button>
                </Space>
            )
        },
    ];

    const [paging, setPaging] = useState<accountPaginationType>({ page: 1, size: 10 });

    // 设置选项内容
    const onFinish: FormProps<accountReqPramesType>['onFinish'] = (e) => {
        dispatch({ type: "SET_PRAMES", payLoad: e });
    };
    const onReset = () => {
        dispatch({ type: "CLEAR_PRAMES" });
        form.resetFields()
    }
    const getList = () => {
        getAccountList({ ...state.prames, paging }).then(res => {
            if (res.code === 0) {
                dispatch({ type: "SET_RESDATA", payLoad: res.data })
            }
        })
    }
    useEffect(() => {
        getList();
    }, [state.prames, paging])

    return <>
        <div className={styles.Hader}>
            <h2>账号管理</h2>
            <Form
                layout='inline'
                onFinish={onFinish}
                initialValues={state.prames}
                form={form}
            >
                <Form.Item<accountReqPramesType> name="username" style={{ width: 250 }} label="姓名">
                    <Input placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item<accountReqPramesType> name="account" style={{ width: 250 }} label="账户">
                    <Input placeholder="请输入账号" />
                </Form.Item>
                <Form.Item<accountReqPramesType> name="phone" style={{ width: 250 }} label="手机号">
                    <Input placeholder="请输入手机号" />
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType='submit'>查询</Button>
                        <Button htmlType="reset" onClick={() => onReset}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
        <TableComponent<accountResDataType> data={state.data.list} columns={columns}>
            <Button type="primary" onClick={() => {
                dispatch({ type: "CHANGE_ADDOREDIT", payLoad: true });
                dispatch({ type: "SET_TYPE", payLoad: 'add' });
            }}>新增</Button>
        </TableComponent>
        <PaginationComponent count={state.data.count} onChange={() => setPaging} />
        {/* 新增编辑 */}
        <AddOrEdit/>
    </>
}

const LayOut: React.FC = () => {
    return <AccountContextProvider>
        <Account />
    </AccountContextProvider>
}


export default LayOut;


